<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书本列表</title>
		<style type="text/css">
			#box{
				width: 800px;
				background-color: #A6EFF5;
				margin: 10px auto;
				border-radius: 20px;
				text-align: center;
			}
			table{
				margin: 0 auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div>
				<input type="text" name="search" placeholder="请输入书名" style="margin-top: 20px;"/>
				<button type="button" id="btn_search">搜索</button>
				<button type="button" id="btn_add">添加</button>
				<button type="button" id="btn_del">批量删除</button>
			</div>
			<br>
			<table border="1">
				<thead>
					<th><input type="checkbox" name="cb_select_all" /></th>
					<th  width="40">id</th>
					<th>名称</th>
					<th width="100">价格</th>
					<th width="120">出版日期</th>
					<th  width="120">数量</th>
					<th width="120">操作</th>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let books = [
				{id: 1, name: 'Java', price: 80, tdate: '2020-07-01', count: 1, account: "aa"},
				{id: 2, name: '红楼梦', price: 90, tdate: '2020-07-02', count: 1, account: "aa"},
				{id: 3, name: '西游记', price: 100.01, tdate: '2020-07-03', count: 1, account: "hehe"},
				{id: 4, name: '水浒传', price: 70.00, tdate: '2020-07-04', count: 1, account: "aa"},
				{id: 5, name: '三国演义', price: 200.00, tdate: '2000-07-04', count: 1, account: "aa"},
			];
			
			let data = JSON.parse(localStorage.getItem("data"));
			if(!data) {
				data = books;
				saveDataStorage2();
			}
			
			//模拟登录成功
			sessionStorage.setItem("account", "hehe");
			let $tbody = $("table").find("tbody");
			
			//init初始化函数
			function init() {
				//绑定事件
				$("#btn_search").click(btn_search);  //搜索
				$("#btn_add").click(btn_add); //添加
				$("#btn_del").click(btn_del); //批量删除
				$("input[name='cb_select_all']").change(selectAll);  //全选
			}
		
		   //保存
			function save() {
				if(!editTr) {
					return;
				}
				console.log(editTr);
				let editData = null;//当前被编辑的数据
				let editDataId = editTr.find("input[name='cb_select']").val();
				let editIndex = 0;
				for(let index in data) {
					let item = data[index];
					if(item.id === parseInt(editDataId)) {
						editData = item;
						editIndex = index;
						break;
					}
				}
				editTr.children().each(function(index, item) {
					if(this.title !== "noedit") {
						//获取td中的input输入框
						let input = $(item).find("input");
						let value = input.val();  //获取input中value值
						input.remove();		//删除input
						$(item).text(value);  //将value添加到td中
						//将input中值绑定到对象的属性上
						if(typeof editData[this.title] === "number") {
							//判断是整型还是浮点型
							if(value.indexOf(".") != -1) {  //浮点型
								editData[this.title] = parseFloat(value);
							}else {   //整型
								editData[this.title] = parseInt(value);
							}
						}else {
							editData[this.title] = value;
						}
						
					}
				});
				//实现数据保存到数组中
				data.splice(editIndex, 1, editData);
				//将数组更新到localStorage中
				saveDataStorage2();
			}
			
			//更改数据
			function saveDataStorage2() {
				localStorage.setItem("data", JSON.stringify(data));
			}
			let editTr;

			//全选/反选
			function selectAll() {
				$("input[name='cb_select']").prop("checked", $(this).prop("checked"));
			}
			
			//批量删除
			function btn_del() {
				//获取所有选中name为cb_select的checkbox
				$("input[name='cb_select']:checked").each(function(index, item) {
					for(let i in data) {
						let dataItem = data[i];
						if(parseInt($(item).val()) === dataItem.id) {
							data.splice(i, 1)
						}
					}
				});
				$tbody.empty();
				update();
				saveDataStorage2();
			}
			
			//编辑
			function toEdit(index) {
				let item = data[index];
				sessionStorage.setItem("index", index);
				sessionStorage.setItem("item", JSON.stringify(item));
				location.href = "add.html";
			}
			
			//添加
			function btn_add() {
				sessionStorage.removeItem("index");
				sessionStorage.removeItem("item");
				location.href = "add.html";
			}
			
			//删除
			function del(index) {
				data.splice(index, 1);
				saveDataStorage2();
				$tbody.empty();
				update();
			}
			
			//搜索
			function btn_search() {
				let search = $("input[name='search']").val(); //获取输入框的值，然后进行搜索
				$tbody.empty();
				update(search);
			}
			
			//加
			function pluscount(index) {
				let item = books[index];
				item.count++;
				let node = $tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				span.innerText = item.count;
			}
			
			//减
			function reduce(index) {
				let item = books[index];
				if (item.count === 1) {
					return;
				}
				item.count--;
				let node = tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				span.innerText = item.count;
			}
		
			//数据显示到页面/更新页面信息
			function update(bookName) {
				for(let index in data){
					let item = data[index];
					//判断登陆名是否与书籍所对应的书籍添加者是否一致
					if(sessionStorage.getItem("account") !== item.account) {
						continue;
					}
					//判断书名是否一致
					if(bookName && item.name.toLowerCase().indexOf(bookName.toLowerCase()) === -1) {
						continue;
					}
					let tr = `
						<tr>
							<td title="noedit"><input type="checkbox" name="cb_select" value="${item.id}" /></td>
							<td title="id">${item.id}</td>
							<td title="name">${item.name}</td>
							<td title="price">${item.price}</td>
							<td title="tdate">${item.tdate}</td>
							<td title="count">
								<button type="button" onclick="reduce(${index})">-</button>
								<span>${item.count}</span>
								<button type="button" onclick="pluscount(${index})">+</button> 
							</td>
							<td title="noedit">
								<button type="button" onclick="toEdit(${index})">编辑</button>
								<button type="button" onclick="del(${index})">删除</button>
							</td>
						</tr>
					`;
					$tbody.append(tr);
				}
			}
			
			update();
			init();

		</script>
	</body>
</html>